<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
  <template>
  <div class="info_item_box">
    <div class="info_item_title">
      <div class="info_item_title_return" @click="returnHistory">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
        <span>信息</span>
      </div>
      <p>{{ transmitInfo.messageTypeName }}</p>
    </div>
    <div class="info_item_search">
      <div class="search_box" @click="searchInfo">
        <img src="@/pages/mobile/assets/img/Search@3x.png" alt />
        <em>搜索</em>
      </div>
      <i @click.stop="setRead">全标已读</i>
    </div>
    <div class="scroll" ref="scroll">
      <scroll
        :loadDatas="taskData"
        :pullUpLoad="pullUpLoad"
        :pulldown="pulldown"
        @pullingDown="loadDownData"
        @pullingUp="loadUpData"
        class="info_list_box"
      >
        <div class="info_list">
          <div
            class="info_list_box_info"
            v-for="item in taskData"
            :key="item.id"
          >
            <dir class="info_list_box_info_img">
              <i
                :class="{
                  i_active: item.messageStatus != 'UNREAD' ? false : true
                }"
              ></i>
              <img
                :class="{
                  isOpacity: item.messageStatus != 'UNREAD' ? true : false
                }"
                :src="item.img"
                alt
              />
            </dir>
            <div class="info_list_info_item">
              <div class="info_list_info_item_title">
                <span
                  :class="{
                    isOpacity: item.messageStatus != 'UNREAD' ? true : false
                  }"
                  >{{ item.messageTitle }}</span
                >
                <em
                  :class="{
                    isOpacity: item.messageStatus != 'UNREAD' ? true : false
                  }"
                  >{{ item.creationTs | dateFormat("yyyy/MM/dd hh:mm:ss") }}
                  <x-icon
                    class="icon_arrows"
                    type="ios-arrow-forward"
                    size="30"
                  ></x-icon>
                </em>
              </div>
              <div class="info_list_info_item_info">
                <p
                  :class="{
                    isOpacity: item.messageStatus != 'UNREAD' ? true : false
                  }"
                >
                  {{ item.messageContent }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- loading 组件 -->
        <div v-show="!taskData.length" class="loading-container">
          <joys-loading></joys-loading>
        </div>
      </scroll>
    </div>

    <transition name="infoSearchAninmtion">
      <info-search
        v-show="infoSearchBox"
        :typeId="transmitInfo.messageTypeId"
        @childEvent="childEvent"
      ></info-search>
      <!--  -->
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import Scroll from "@/pages/mobile/components/JoysScroll/JoysScroll";
import JoysLoading from "@/pages/mobile/components/JoysLoading/JoysLoading";
import InfoSearch from "./InfoSearch.vue";
export default {
  name: "infolist",
  components: {
    Scroll,
    JoysLoading,
    InfoSearch
  },
  data () {
    return {
      transmitInfo: this.$route.query.itemInfo,
      messageTypeId: this.$route.query.itemInfo.messageTypeId,
      title: "业务反馈",
      infoSearchBox: false,
      pulldown: true,
      pullUpLoad: true,
      taskData: [],
      pageNum: 1
    };
  },
  methods: {
    loadInfoItem () {
      // var _this = this;

      setTimeout(() => {
        //模拟ajax
        this.infoDataQuery(1);
      }, 500);
    },
    loadDownData () {
      console.log("下拉刷新");
      setTimeout(() => {
        this.infoDataQuery(1);
        this.taskData = [];
      }, 1000);
    },
    loadUpData () {
      console.log("上拉加载");
      setTimeout(() => {
        //模拟ajax
        this.pageNum++;
        this.infoDataQuery(this.pageNum);
      }, 1000);
    },

    // 全标已读
    setRead () {
      this.$axios({
        method: "put",
        url: "/joys-rest/joys-admin/message/status",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          messageTypeId: this.messageTypeId
        }
      })
        .then(res => {
          this.infoDataQuery(1);
        })
        .catch(error => {
          console.log("error");
        });
    },

    // 请求信息列表
    infoDataQuery (page) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-admin/message/page",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          messageTypeId: this.messageTypeId,
          pageIndex: page,
          pageSize: 10
        }
      }).then(res => {
        this.taskData = this.taskData.concat(res.data.rows);

        // if (!res.data.rows.length == 0) {
        //   this.lists = [...this.lists, ...res.data.rows];
        //   console.log(this.lists, "数据总数");
        //   //单次请求数据加载完毕后
        // } else {
        //   //把page设置成false 数据已经加载完毕了 不用在加载了
        //   // this.page = false;
        // }
      });
    },

    returnHistory () {
      this.$router.goBack();
    },
    searchInfo () {
      this.infoSearchBox = true;
    },
    childEvent () {
      this.infoSearchBox = false;
    }
  },
  mounted () {
    this.loadInfoItem();
  }
};
</script>

<style scoped lang="less">
.info_item_box {
  background: #fbf9fe;
  position: fixed;
  top: 0rem;
  bottom: 0.1rem;
  width: 100%;
  height: 100%;
  z-index: 300;
  overflow: hidden;
  .info_item_title {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .info_item_title_return {
      // margin-top: -0.04rem;
      float: left;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
      }
      span {
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        line-height: 0.22rem;
      }
    }
    p {
      font-family: Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 0.7rem;
      margin-right: 0.7rem;
    }
  }
  .info_item_search {
    height: 0.44rem;
    width: 100%;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    .search_box {
      // width: 100%;
      position: absolute;
      top: 0rem;
      left: 0rem;
      width: 100%;
      height: 0.44rem;
      line-height: 0.44rem;
      img {
        width: 0.156rem;
        position: absolute;
        left: 0.24rem;
        top: 0.15rem;
      }
      em {
        display: block;
        height: 0.32rem;
        background: rgba(89, 89, 89, 0.09);
        font-family: Regular;
        font-size: 0.14rem;
        color: #909090;
        margin-left: 0.14rem;
        padding-left: 0.28rem;
        height: 0.32rem;
        line-height: 0.32rem;
        margin-top: 0.05rem;
      }
    }
    i {
      display: block;
      height: 0.44rem;
      width: 0.85rem;
      line-height: 0.44rem;
      text-align: center;
      font-family: Regular;
      font-size: 0.14rem;
      color: #001616;
      letter-spacing: -0.34px;
      position: absolute;
      top: 0rem;
      right: 0rem;
      background: #ffffff;
      box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    }
  }
  .scroll {
    width: 100%;
    .info_list_box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin-top: 0.88rem;
      .info_list {
        margin-top: 0.04rem;
        // margin-bottom: 0.9rem;
        .info_list_box_info {
          background: #ffffff;
          overflow: hidden;
          .info_list_box_info_img {
            float: left;
            width: 0.64rem;
            height: 0.8rem;
            border-radius: 0.18rem;
            display: flex;
            align-items: center;
            i {
              height: 12px;
              width: 12px;
              border-radius: 50%;
              display: inline-block;
              margin-left: 0.06rem;
            }
            .i_active {
              background: #E9B55C;
            }
            img {
              width: 0.32rem;
              height: 0.32rem;
              margin: auto;
              border-radius: 50%;
            }
            .isOpacity {
              opacity: 0.6;
            }
          }
          .info_list_info_item {
            // width: 100%;
            // width: 2.87rem;

            margin-left: 0.48rem;
            height: 0.8rem;
            box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
            // background-color: red;
            // float: left;
            .info_list_info_item_title {
              overflow: hidden;
              padding-bottom: 0.04rem;
              // height: 0.24rem;
              span {
                float: left;
                margin-top: 0.12rem;
                font-family: Mediums;
                font-size: 0.15rem;
                color: #001616;
                letter-spacing: -0.36px;
                height: 0.2rem;
                line-height: 0.2rem;
                width: 60%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .isOpacity {
                opacity: 0.6;
              }
              em {
                float: right;
                font-family: Regular;
                font-size: 0.13rem;
                color: #adadad;
                letter-spacing: -0.36px;
                text-align: right;
                line-height: 0.13rem;
                margin-top: 0.12rem;
                display: flex;
                align-items: center;
                .vux-x-icon {
                  fill: #d1d1d6;
                  height: 0.16rem;
                  overflow: hidden;
                }
              }
            }
            .info_list_info_item_info {
              overflow: hidden;
              height: 0.32rem;
              margin-right: 0.16rem;
              p {
                float: left;
                font-family: Regular;
                font-size: 0.13rem;
                color: #8e8e8e;
                letter-spacing: -0.31px;
                text-align: justify;
                line-height: 0.16rem;
                overflow: hidden;
              }
              .isOpacity {
                opacity: 0.6;
                overflow: hidden;

                text-overflow: ellipsis;

                display: -webkit-box;

                -webkit-box-orient: vertical;

                -webkit-line-clamp: 2;
              }
            }
          }
        }
      }
    }
  }
  // .info_list_box::after {
  //   // content: "";
  //   // display: block;
  //   // height: 0.88rem;
  //   // width: 100%;
  // }
  .info_list::after {
    content: "";
    display: block;
    height: 0.9rem;
    width: 100%;
  }
  .infoSearchAninmtion-enter-active,
  .infoSearchAninmtion-leave-active {
    transition: all 0.5s ease;
  }
  .infoSearchAninmtion-enter,
  .infoSearchAninmtion-leave-to {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
  }
}
</style>
